<template>
	<div class="ad-swiper" :class="{ '-mt-hover-offset': isTop }">
		<base-swiper :total="adList.length" :data="adList" :max-cols="3"></base-swiper>
	</div>
</template>

<script lang="ts" setup>
import { BaseSwiper } from '@/components/base'
import { PropType, watch, onMounted, ref } from 'vue'
import { AdPositionType } from '@/enums'
import { useAppStore } from '@/store'
import { getAdsList } from '@/api/other.ts'
import { setItem, getItem } from '@/utils'
import { ADS_LIST } from '@/constants'
const adList: any = ref([])
defineProps({
	type: {
		type: Number as PropType<AdPositionType>,
		required: true
	},
	imageType: {
		type: String,
		default: 'network'
	},
	isTop: {
		type: Boolean,
		default: true
	}
})

const appStore = useAppStore()
watch(
	() => [appStore.lang],
	() => {
		getList()
	}
)
const getList = async () => {
	adList.value = Array.from(getItem(ADS_LIST) || [])
	const { data } = await getAdsList({
		page: 1,
		pageSize: 50,
		displayLocation: 'CASINO_HOME_ADS_DISPLAY'
	})
	adList.value = Array.from(data.items || [])
	setItem(ADS_LIST, adList.value)
}
onMounted(() => {
	getList()
})
</script>
